<template>
  <div>
    <div id="printComment" class="content-container">
      <el-timeline style="margin-top: 22px; margin-left: 15px">
        <el-timeline-item
          v-for="(item, index) in state.dataList"
          :key="index"
          :icon="item.status === '0' ? 'Loading' : 'SuccessFilled'"
          :color="item.status === '0' ? '#409EFF' : '#19be6b'"
          size="large"
          :timestamp="item.createTime"
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: flex-start;
              white-space: nowrap;
              width: 100%;
            "
          >
            <el-tag v-if="item.status === '1'" type="success" size="large"
              >{{ item.nodeName }}-{{ item.jobName }}【已办理】
            </el-tag>
            <el-tag v-else-if="item.status === '-2'" type="warning" size="large"
              >{{ item.nodeName }}-{{ item.jobName }}【已作废】
            </el-tag>
            <el-tag v-else-if="item.status === '-3'" type="danger" size="large"
              >{{ item.nodeName }}-{{ item.jobName }}【已终止】
            </el-tag>
            <el-tag v-else type="primary" size="large"
              >{{ item.nodeName }}-{{ item.jobName }}
            </el-tag>
            <span v-if="!item.autoAudit">
              {{ item.userName ? "【用户】" + item.userName : "" }}
            </span>
            <span>{{ item.endTime }}</span>
            <span v-if="item.btnName">【{{ item.btnName }}】</span>
            <span v-if="item.toNodeName"
              >&nbsp;&nbsp;至&nbsp;&nbsp;【{{ item.toNodeName }}】</span
            >
            <span v-if="item.remark"
              >&nbsp;&nbsp;审批意见&nbsp;&nbsp;【{{ item.remark }}】</span
            >
            <DicTag
              v-if="item.signatureType"
              dict-code="run_job_signature_type"
              :value="item.signatureType"
            />
            <el-button
              v-if="(item.status === '0' || item.status === '9') && item.userId"
              text
              type="primary"
              icon="Bell"
              @click="remind(item.runJobId)"
            >
              催办任务
            </el-button>
            <el-button
              v-if="item.subFlowStatus === '0' && item.subFlowInstId"
              text
              type="primary"
              icon="Bell"
              @click="remindFlow(item.subFlowInstId)"
            >
              催办子流程
            </el-button>
            <!-- <el-button
              v-if="item.status === '0' && validateSignOff(item)"
              text
              type="primary"
              icon="delete"
              @click="signOff(item)"
            >
              减签
            </el-button> -->
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <footer class="el-dialog__footer">
      <span class="dialog-footer">
        <el-button
          v-if="props.showClose"
          type="warning"
          class="header-option-button"
          icon="CircleCloseFilled"
          @click="handleClose"
        >
          关闭
        </el-button>
        <el-button type="primary" @click="printForm">打印</el-button>
      </span>
    </footer>
  </div>
</template>

<script setup lang="ts" name="CommentTimeline">
import { queryList } from "@/api/flow/runcomment";
import { useMessage } from "@/hooks/message";
import * as runJobApi from "@/api/flow/task/index";
import * as runFlowApi from "@/api/flow/runflow";
import { printHtml } from "@/utils/process";
import { onMounted, reactive, ref, watch } from "vue";
import DicTag from "@/components/dictTag.vue";

const props = defineProps({
  flowInstId: {
    type: String,
    default: ""
  },
  showClose: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits(["close"]);

const state = reactive({
  dataList: [],
  width: "-"
});

// 监听双向绑定
watch(
  () => props.flowInstId,
  val => {
    queryTableData();
  }
);

const handleClose = () => {
  emits("close");
};

const queryTableData = () => {
  const queryForm = {
    flowInstId: props.flowInstId,
    descs: "create_time"
  };
  queryList(queryForm).then(res => {
    state.dataList = res.data;
  });
};

function signOff(row) {
  runJobApi.signoff({ id: row.runJobId }).then(() => {
    queryTableData();
    useMessage().success("减签成功");
  });
}

function remind(runJobId: string) {
  runJobApi.remind({ id: runJobId }).then(() => {
    useMessage().success("催办任务成功");
  });
}

function remindFlow(flowInstId: string) {
  runFlowApi.remind({ id: flowInstId }).then(() => {
    useMessage().success("催办流程成功");
  });
}

function validateSignOff(row) {
  if (row.runJob && row.signatureType) {
    return true;
  }
  return false;
}

function printForm() {
  printHtml("printComment", "审批过程");
}

onMounted(() => {
  queryTableData();
});
</script>

<style scoped lang="scss">
.content-container {
  height: calc(100vh - 190px);
  overflow-y: auto;
}

@media print {
  :deep(.el-icon) {
    width: 1500px !important;
    height: 1500px !important;
  }
}
</style>
